<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>条纹背景</title>
  <style>
    div {
    width: 300px;
    height: 300px;
    padding: 1px;
    margin: 200px auto;
    color: purple;
    /* 渐变色 */
    /* 渐变轴为45度，从蓝色渐变到红色 */
    /* background: linear-gradient(45deg, blue, red); */
    /* background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); */
    /* background: linear-gradient(red, orange);  */
    /* yellow 10%, green 10%, blue 10%, rgb(124, 118, 107) 10% */
    
    /* 条纹背景 颜色 */
    background: linear-gradient(20deg, #fb3 10%, blue 0, blue 20%, red 0, red 30%, green 0 , green 40%, indigo 0, indigo 50%, violet 0, violet 60%, yellow 0, yellow 70%, gray 0, gray 80%, brown 0, brown 90%, orange 0, orange);
    /* background: linear-gradient(red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); */
    /* 渐变范围 */
    /* background-size: 100% 150px; */
    
    
    }
  </style>
</head>
<body>
  <div>
  </div>
</body>
</html>